<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>商城首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!--标准mui.css-->
    <link rel="stylesheet" href="../mui/hello-mui/css/mui.min.css">
    <!-- 扩展图标库 -->
    <link rel="stylesheet" href="../mui/hello-mui/css/icons-extra.css" type="text/css">
    <!-- de-css -->
    <link rel="stylesheet" href="../dece/css/de-css.css">
    <link rel="stylesheet" href="../dece/css/vue_component.css">
    
    <script src="../dece/js/app.js" type="text/javascript"></script>
    <script src="../dece/js/vue.js" type="text/javascript"></script>
    <script src="../dece/js/axios.min.js" type="text/javascript"></script>
    <script src="../dece/js/vue_component.js" type="text/javascript"></script>
    <!-- 引入饿了么样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入饿了么组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        .el-carousel__item h3 {
            color: #475669;
            font-size: 14px;
            opacity: 0.75;
            line-height: 150px;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <header class="mui-bar mui-bar-transparent">
            <a href="javascript:history.go(-1);" class="mui-icon mui-action-back mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">商城首页</h1>
            <a class="mui-icon mui-icon-bars mui-pull-right" href="#menu_right"></a>
        </header>
        <template>
            <div class="block">
                <el-carousel height="200px">
                <el-carousel-item v-for="row in poll_img" :key="row.id">
                    <img :src="'../mui/hello-mui/images/' + row.image" />
                </el-carousel-item>
                </el-carousel>
            </div>
        </template>
        <!-- 底部导航栏 -->
        <de-bar></de-bar>

        <div class="mui-content" style="padding-top: 15px;">
            <!-- 使用dece商品展示 -->
            <div class="de-shop">
                <!-- 样式1 -->
                <!-- <div class="de-goods">
                    <div class="de-bk">
                        <img src="../mui/hello-mui/images/yuantiao.jpg">
                        <div class="de-title"><span>小肥牛</span></div>
                        <div class="de-ds"><span>商品描述呀</span></div>
                        <div class="de-price"><span>￥100</span><label>已销售1000件</label></div>
                    </div>
                </div> -->
                <!-- 样式2 -->
                <!-- <div class="de-goods">
                    <div class="de-bk">
                        <img src="../mui/hello-mui/images/yuantiao.jpg">
                        <div class="de-title2"><span>商品名称呀商品名称呀</span></div>
                        <div class="de-price2"><span>￥100000</span><label>32221人已买</label></div>
                    </div>
                </div> -->
                <!-- 样式3 -->
                <div class="de-goods" v-for="row in goods_arr">
                    <div class="de-bk">
                        <img :src="api_host + row.images" @click="goods_detail(row.id)">
                        <div class="de-title2"><span>{{row.goods_name}}</span></div>
                        <div class="de-price2">
                            <span>￥{{row.price}} / 1{{row.unit}}</span>
                            <a @click="addcar(row.id)"><img src="../mui/svg/add_car.svg"></a>
                        </div>
                    </div>
                </div>
                
            </div>
            <div style="min-height: 50px;"></div>
        </div>
        <!-- 弹出层 start -->
        <div id="menu_right" class="mui-popover mui-popover-action mui-popover-bottom">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="../file/type.html">附件管理</a>
                </li>
                <li class="mui-table-view-cell">
                    <a href="../home/setting.html">其他设置</a>
                </li>
                <li class="mui-table-view-cell">
                    <a @click="logout" href="#">退出登陆</a>
                </li>
            </ul>
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a href="#menu_right"><b>取消</b></a>
                </li>
            </ul>
        </div>
        <!-- 弹出层 end -->
    </div>
    <script type="text/javascript" charset="utf-8">
        new Vue({
            el: "#app",
            data: {
                poll_img: [
                    {id: 1, image: 'yuantiao.jpg'},
                    {id: 2, image: 'muwu.jpg'},
                    {id: 3, image: 'cbd.jpg'},
                    {id: 4, image: 'shuijiao.jpg'}
                ],
                goods_arr: [],
                api_host: de.api_host,
            },
            created: function (){
                // 验证是否登陆
                if (!common.auth_login()) {
                    common.href("../login.html");
                }
                this.goods_list();
            },
            mounted: function (){

            },
            methods: {
                // 退出登陆
                logout: function (){
                    common.logout();
                },
                // 商品列表
                goods_list: function (){
                    var the = this;
                    de.created();
                    // 提交数据
                    axios.post(de.api.goods_index, {}, {headers:de.header}).then(function (data){
                        var dd = data.data;
                        if (dd.code == 200) {
                            the.goods_arr = dd.data;
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
                goods_detail: function ( id ){
                    common.href('./goods.html?id='+id);
                },
                // 加入购物车
                addcar: function ( id ){
                    var the = this;
                    var login = common.auth_login();
                    // 打印数据
                    var obj = {token:login, id:id, goods_num:1};
                    console.log(obj);
                    // 提交数据
                    axios.post(de.api.order_addcar, {token:login, id:id, goods_num:1}).then(function (data){
                        var dd = data.data;
                        // console.log(dd);
                        if (dd.code == 200) {
                            alert(dd.info);
                        } else {
                            alert(dd.info);
                            common.href("../login.html");
                        }
                    }).catch(function (error) {
                        console.log(error);
                    });
                },
            },
        });
    </script>
</body>

</html>